<template>
	<view class="container">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="歌手" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="pic" :style="{backgroundImage: 'url(' + coverImgUrl + ')'}">
			<text>{{name}}</text>
		</view>
		<JianJie :description="description"></JianJie>
		<view class="list">
			<view class="lists" v-for="(item,index) in hotSongs" :key="item.id" @click="jump(item.id)">
				<text>{{index + 1}}</text>
				<view class="right">
					<view class="title">{{item.al.name}}</view>
					<view class="song">{{item.ar[0].name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {artists,desc} from '../../api/GeShouLieBiao/GeShouLieBiao.js'
	import JianJie from '../../components/JianJie/JianJie.vue'
	export default {
		components:{
			JianJie
		},
		data() {
			return {
				name:'',
				hotSongs:[],
				coverImgUrl:'',
				description:''
			}
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
				    delta: 1
				})
			},
			jump(id){
				uni.navigateTo({
					url:'../BoFangQi/BoFangQi?id=' + id
				})
			}
		},
		onLoad(option){
			artists({id:option.id}).then(res => {
				this.name = res.artist.name
				this.hotSongs = res.hotSongs
				this.coverImgUrl = res.artist.picUrl
			})
			desc({id:option.id}).then(res => {
				this.description = res.briefDesc
			})
		}
	}
</script>

<style lang="scss">
	.container{
		width: 750rpx;
		.pic{
			width: 100%;
			height: 562rpx;
			//background-image: url(../../static/logo.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			text{
				position: absolute;
				font-size: 17px;
				font-weight: 700;
				color: #8a8a8a;
				top: 480rpx;
				left: 60rpx;
			}
		}
		.list{
			width: 100%;
			height: 562rpx;
			background-color: white;
			border-radius: 10px;
			.lists{
				width: 100%;
				height: 120rpx;
				//background-color: pink;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 1px solid #e4e4e4;
				text{
					color: #757575;
				}
				.right{
					height: 100%;
					width: 80%;
					//background-color: green;
					.title{
						margin-top: 10rpx;
					}
					.song{
						font-size: 24rpx;
						color: #757575;
						margin-top: 15rpx;
					}
				}
			}
		}
	}
</style>
